<template>
  <div class="comment">
    <!-- 评论列表 :immediate-check="false"关闭列表自动加载=》手动控制 -->
    <van-list
      :immediate-check="false"
      v-model="loading"
      :finished="finished"
      @load="loadComments"
      finished-text="没有更多了"
    >
      <div
        class="item van-hairline--bottom van-hairline--top"
        v-for="(item, index) in comments"
        :key="index"
      >
        <van-image
          round
          width="1rem"
          height="1rem"
          fit="fill"
          :src="item.aut_photo"
        />
        <div class="info">
          <p>
            <span class="name">{{ item.aut_name }}</span>
            <span style="float: right">
              <span class="van-icon van-icon-good-job-o zan"></span>
              <span class="count">{{ item.like_count }}</span>
            </span>
          </p>
          <p></p>
          <p>
            <span class="time">两天内</span>&nbsp;
            <van-tag plain @click="showReply = true">4 回复</van-tag>
          </p>
        </div>
      </div>
    </van-list>
    <!-- 底部输入框 发表对文章的评论-->
    <div class="reply-container van-hairline--top">
      <van-field v-model="value" placeholder="写评论...">
        <!-- 有赞组件  -->
        <van-loading v-if="submiting" slot="button" type="spinner" size="16px">
        </van-loading>
        <span class="submit" v-else slot="button">提交</span>
      </van-field>
    </div>
  </div>
</template>
<script>
import { getComments } from '../../../api/article'
export default {
  data () {
    return {
      // 评论列表
      comments: [],
      // 评论列表加载中状态
      loading: false,
      // 评论列表完全加载完毕状态
      finished: false,
      // 输入的内容 评论或者回复的内容
      value: '',
      // 提交 评论或者回复 中
      submiting: false,
      // 分页偏移量
      offset: null
    }
  },
  activated () {
    // 手动 获取
    this.comments = []
    this.finished = false
    this.loading = true
    this.offset = null
    this.loadComments()
  },
  methods: {
    async loadComments () {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      const { data } = await getComments({
        type: 'a',
        source: this.$route.params.id,
        offset: this.offset

      })
      this.comments.push(...data.results)
      // 加载状态结束
      this.loading = false

      // 数据全部加载完成
      if (this.comments.length === data.total_count) {
        this.finished = true
      } else {
        // 准备下一页数据的请求起点
        this.offset = data.last_id
      }
    }
  }
}
</script>
<style lang="less" scoped>
.comment {
  margin-top: 10px;
  /deep/ .item {
    display: flex;
    padding: 10px 0;
    width: 100%;
    overflow: hidden;
    text-align: left;
    .info {
      flex: 1;
      padding-left: 10px;
      .name {
        color: #069;
      }
      .zan {
        vertical-align: middle;
        padding-right: 2px;
      }
      .count {
        vertical-align: middle;
        font-size: 10px;
        color: #666;
      }
      .time {
        color: #666;
      }
      p {
        padding: 5px 0;
        margin: 0;
      }
    }
  }
  /deep/ .van-button:active::before {
    background: transparent;
  }
}
.reply-container {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 44px;
  width: 100%;
  background: #f5f5f5;
  z-index: 9999;
  .submit {
    font-size: 12px;
    color: #3296fa;
  }
}
</style>
